var arrOptions=new Array();
var strLastValue=""; 
var theTextBox;
var currentValueSelected=-1;
var req;

window.onload=function()
{
	alert(12121);
	var elemSpan=document.createElement("span");
	elemSpan.id="spanOutput";
	elemSpan.className="spanTextDropdown";
	document.body.appendChild(elemSpan);
	document.Form1.txtUserInput.onkeyup=GiveOptions;
}

function GiveOptions()
{
	var intkey=-1;
	if(window.event)
	{
		intkey=event.keyCode;
		theTextBox=event.srcElement;
		/*alert(intkey);*/
	}
	if(theTextBox.value.length==0)
	{
		HideTheBox();
		strLastValue="";
		/*alert("Come to GiveOptions Input null ");*/
		return false;
	}
	if(intkey==13)
	{
		GrabHighlighted();
		theTextBox.blur();
		/*alert("Come to GiveOptions Input Enter");*/
		return false;
	}
	else if(intkey==38)
	{
		MoveHighlight(-1);
		/*alert("Come to GiveOptions Input up");*/
		return false;
	}
	else if(intkey==40)
	{
		MoveHighlight(1);
		/*alert("Come to GiveOptions Input down");*/
		return false;
	}
	
	if(theTextBox.value.indexOf(strLastValue)!=0||arrOptions.length==0||(strLastValue.length==0&&theTextBox.value.length>0)||(theTextBox.value.length<=strLastValue.length))
	{
		strLastValue=theTextBox.value;
		/*alert("To TypeAhead");*/
		TypeAhead(theTextBox.value);
	}
	else
	{
		BuildList(theTextBox.value);
	}
}

function TypeAhead(xStrText)
{
	var url="make.action?userSearchInput="+xStrText;
	/*alert("url="+url);*/
	if(window.XMLHttpRequest)
	{
		req=new XMLHttpRequest();
	}
	else if(window.ActiveXObject)
	{
		req=new ActiveXObject("Microsoft.XMLHTTP");
	}
	if(req)
	{
		req.open("GET",url,true);
		req.onreadystatechange=callback;
		req.send(null);
	}
}

function callback()
{
	if(req.readyState==4)
	{
		if(req.status==200)
		{
			parseMessage();			
		}
		else
		{
			/*alert("req.status!=200 "+req.statusText);*/
		}
	}
	else
	{
		/*alert("req.readyState!=4");*/
	}
}
	
function parseMessage()
{
	
	var xmldoc=req.responseXML.documentElement;
	var node=xmldoc.getElementsByTagName("info");
	/*document.getElementById("test").innerHTML=node[0].firstChild.nodeValue;*/
	arrOptions=new Array();
	for(var i=0;i<node.length;i++)
	{
		arrOptions[i]=node[i].firstChild.nodeValue;
		/*document.getElementById("test").innerHTML+=node[i].firstChild.nodeValue+"  ";*/
	}
	BuildList(theTextBox.value);
	strLastValue=theTextBox.value;
}

function BuildList(theText)
{
	SetElementPosition();
	var inner="";
	var theMatches=MakeMatches(theText);
	for(var i=0;i<theMatches.length;i++)
	{
		inner+=theMatches[i];
	}
	if(theMatches.length>0)
	{
		document.getElementById("spanOutput").innerHTML=inner;
		document.getElementById("OptionsList_0").ClassName="spanHighElement";
		currentValueSelected=0;
	}
	else
	{
		HideTheBox();
	}
}

function SetElementPosition()
{
	var selectedPosX=0;
	var selectedPosY=0;
	var theElement=document.Form1.txtUserInput;
	var theTextBoxInt=document.Form1.txtUserInput;
	if(!theElement) return;
	var theElemHeight=theElement.offsetHeight;
	var theElemWidth=theElement.offsetWidth;
	while(theElement!=null)
	{
		selectedPosX+=theElement.offsetLeft;
		selectedPosY+=theElement.offsetTop;
		theElement=theElement.offsetParent;
	}
	xPosElement=document.getElementById("spanOutput");
	xPosElement.style.left=selectedPosX;
	xPosElement.style.width=theElemWidth;
	xPosElement.style.top=selectedPosY+theElemHeight;
	xPosElement.style.display="block";
	/*alert("Welcome to SetElementPosition() "+xPosElement.id);*/
}

var countForId=0;
function MakeMatches(xCompareStr)
{
	
	countForId=0;
	var matchArray=new Array();
	var regExp=new RegExp(xCompareStr,"ig");
	for(var i=0;i<arrOptions.length;i++)
	{
		if((arrOptions[i].search(regExp))>=0)
		{
			matchArray[matchArray.length]=CreateUnderline(arrOptions[i],xCompareStr,i);
			/*alert(matchArray[i]);*/
		}
		else
			continue;
	}
	return matchArray;
}

var underStart="<span class='spanMatchText'>";
var underEnd="</span>";
var selectSpanStart="<span style='width:100%;display:block;' class='spanNormalElement' onmouseover='SetHighColor(this)' ";
var selectSpanEnd="</span>";
function CreateUnderline(xStr,xTextMatch,xVal)
{
	selectSpanMid="onclick='SetText("+xVal+")'"+"id='OptionsList_"+countForId+"'theArrayNumber='"+xVal+"'>";
	countForId++;
	var regExp=new RegExp(xTextMatch,"ig");
	var start=xStr.search(regExp);
	var matchedText=xStr.substring(start,start+xTextMatch.length);
	var Replacestr=xStr.replace(regExp,underStart+matchedText+underEnd);
	return selectSpanStart+selectSpanMid+Replacestr+selectSpanEnd;
}

function SetHighColor(theTextBox)
{
	if(theTextBox)
	{
		currentValueSelected=theTextBox.id.slice(theTextBox.id.indexOf("_")+1,theTextBox.id.length);
	}
	for(var i=0;i<countForId;i++)
	{
		document.getElementById('OptionsList_'+i).className='spanNormalElement';
	}
	document.getElementById('OptionsList_'+currentValueSelected).className='spanHighElement';
}

function SetText(xVal)
{
	theTextBox=document.Form1.txtUserInput;
	theTextBox.value=arrOptions[xVal];
	document.getElementById("spanOutput").style.display="none";
	currentValueSelected=-1;
}

function GrabHighlighted()
{
	if(currentValueSelected>=0)
	{
		xVal=document.getElementById("OptionsList_"+currentValueSelected).getAtrribute("theArrayNumber");
		SetText(xVal);
		HideTheBox();
	}
}

function HideTheBox()
{
	document.getElementById("spanOutput").style.display="none";
	currentValueSelected=-1;
}

function MoveHighlight(xDir)
{
	if(currentValueSelected>=0)
	{
		newValue=parseInt(currentValueSelected)+parseInt(xDir);
		if(newValue>-1&&newValue<countForId)
		{
			currentValueSelected=newValue;
			SetHighColor(null);
		}
	}
}
function ReDraw()
{
	BuildList(document.Form1.txtUserInput.value);
}



  // JavaScript Document
    
    var submitUsernameOK=false;
    var submitPasswordOK=false;
    var bXmlHttpSupport = (typeof XMLHttpRequest != "undefined" || window.ActiveXObject);
     
    if (typeof XMLHttpRequest == "undefined" && window.ActiveXObject) {
        function XMLHttpRequest() {
            var arrSignatures = ["MSXML2.XMLHTTP.5.0", "MSXML2.XMLHTTP.4.0",
                                 "MSXML2.XMLHTTP.3.0", "MSXML2.XMLHTTP",
                                 "Microsoft.XMLHTTP"];
                             
            for (var i=0; i <  arrSignatures.length; i++) {
                try {        
                    var oRequest = new ActiveXObject(arrSignatures[i]);            
                    return oRequest;        
                } catch (oError) { /*ignore*/ }
            }          
    
            throw new Error("MSXML is not installed on your system.");               
        }
    }    
    //      
    function usernameIsExit() {        
        if(bXmlHttpSupport) {
        	var username=document.getElementById('username').value;
			var sUrl="./usernameIsExit.action?username="+escape(username);
            //var sUrl = 'JsonPlugin.action';
            var oRequest = new XMLHttpRequest();
            oRequest.onreadystatechange = function() {
                if(oRequest.readyState == 4) {                    
                    var useraction = eval('(' + oRequest.responseText + ')');
                    var tips = document.getElementById('usernameTips');
					if(useraction.tipsmessage=="username can use."){
						submitUsernameOK=true;// can submit
						//alert("submitUsernameOK="+submitUsernameOK);
                    	tips.style.color="#339900";
                    }
					else
						tips.style.color="#FF0000";
					 tips.innerHTML = useraction.tipsmessage;
                }
            };
            oRequest.open('POST', sUrl);
            oRequest.send(null);
        }
    }

	